<template>
  <div>
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>化合物上传</el-breadcrumb-item>
    </el-breadcrumb> -->

    <el-card style="margin-top: 10px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <div class="manager-alla">
          <div class="project-managera"></div>
          <div class="project-itema">
            <el-breadcrumb-item :to="{ path: '/' }"
              >请选择上传的数据类型:</el-breadcrumb-item
            >
          </div>
        </div>
        <hr
          style="width: 1642px;
                 height: 1px;
                 border:none;
                 background: #E8ECF0;
                 margin-left:-23px;
                 margin-top:-8px;"
        />
      </el-breadcrumb>
      <!-- <el-alert
        title="注意:化合物id(s_id)是化合物唯一标识符，您只能修改数据库中已有的化合物，若您希望添加化合物或您不知道化合物原本的s_id，请将s_id留空，若您输入了s_id，则会覆盖掉数据库原有数据。"
        type="warning"
        show-icon
        style="margin-bottom:20px; margin-top:15px;"

      >
      </el-alert>
      <el-radio-group
        v-model="compoundSelection"
        style="margin-top: 10px;margin-bottom:20px;"
      >
        <el-radio label="1">MD</el-radio>
        <el-radio label="2">MC</el-radio>
        <el-radio label="3">BIO</el-radio>
      </el-radio-group>

      <el-form
        v-if="compoundSelection !== 0"
        :model="uploadForm"
        ref="uploadRef"
        label-width="140px"
        class="molecular-Compose"
      >
        <el-col :span="24"> -->
      <!-- <el-row style="display:flex;justify-content:space-around;">
            <div>
              <el-form-item label="上传excel文件 :" prop="excelUrl">
                <el-upload
                  class="upload-demo"
                  ref="excel"
                  :limit="1"
                  show-file-list
                  action=" http://121.36.58.180:8081/uploadExcel"
                  :on-preview="handlePreview"
                  :on-remove="handleExcelRemove"
                  :on-success="excelHandleSuccess"
                  :on-error="excelHandleError"
                  :file-list="excelFile"
                  :before-upload="beforeExcelUpload"
                  drag
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    请上传xls/xlsx类型的文件
                  </div>
                  <div class="el-upload__tip" slot="tip"></div>
                </el-upload>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="上传压缩文件 :" prop="moduleUrl">
                <el-upload
                  class="upload-demo"
                  ref="rar"
                  :limit="1"
                  show-file-list
                  action=" http://121.36.58.180:8081/uploadExcel"
                  :on-preview="handlePreview"
                  :on-remove="handleRarRemove"
                  :on-success="rarHandleSuccess"
                  :on-error="rarHandleError"
                  :file-list="rarFile"
                  :before-upload="beforeRarUpload"
                  drag
                > -->
      <!-- <el-button slot="trigger" size="small" type="primary"
                    >选取文件</el-button
                  >
                  <div slot="tip" class="el-upload__tip">
                    只能上传 rar/zip/7z 文件
                  </div> -->
      <!-- <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    请上传rar/zip/7z类型的文件
                  </div>
                  <div class="el-upload__tip" slot="tip"></div>
                </el-upload>
              </el-form-item>
            </div>
          </el-row>
        </el-col>
      </el-form> -->
      <el-tabs type="border-card" style="margin:20px;">
        <el-tab-pane label="上传内嵌图片文件">
          <el-alert
            title="注意:化合物id(s_id)是化合物唯一标识符，您只能修改数据库中已有的化合物，若您希望添加化合物或您不知道化合物原本的s_id，请将s_id留空，若您输入了s_id，则会覆盖掉数据库原有数据。"
            type="warning"
            show-icon
            style="margin-bottom:20px; margin-top:10px;"
          >
          </el-alert>
          <div style="display:flex;margin-top:40px;">
            <div style="margin-right:20px;">上传excel文件：</div>
            <el-upload
              class="upload-demo"
              ref="excel"
              :limit="1"
              show-file-list
              :action="url+`uploadExcel`"
              :on-preview="handlePreview"
              :on-remove="handleExcelRemove"
              :on-success="excelHandleSuccess"
              :on-error="excelHandleError"
              :file-list="excelFile"
              :before-upload="beforeExcelUpload"
              drag
            >
              <div style="margin-top:35px;">
                <img src="../../icon标/组 40.png" alt="" />
              </div>
              <div class="el-upload__text" style="color:rgba(153, 153, 153, 1)">
                点击或将文件拖拽这里上传，仅限xls/xlsx文件
              </div>
              <div class="el-upload__tip" slot="tip"></div>
            </el-upload>
          </div>
          <div style="text-align:center;margin-top:80px;margin-bottom:80px;">
            <el-button
              type="primary"
              @click="uploadFormSubmit"
              style="width: 140px !important;
              height: 40px !important;"
              >&nbsp;&nbsp;提 &nbsp;交&nbsp;&nbsp;</el-button
            >
          </div>
        </el-tab-pane>
        <el-tab-pane label="上传打包文件">
          <el-alert
            title="注意:化合物id(s_id)是化合物唯一标识符，您只能修改数据库中已有的化合物，若您希望添加化合物或您不知道化合物原本的s_id，请将s_id留空，若您输入了s_id，则会覆盖掉数据库原有数据。"
            type="warning"
            show-icon
            style="margin-bottom:20px; margin-top:10px;"
          >
          </el-alert>
          <div style="display:flex;margin-top:40px;float: left;">
            <div style="margin-right:10px;">上传excel文件：</div>
            <el-upload
              class="upload-demo"
              ref="rar"
              :limit="1"
              show-file-list
              :action="url+`uploadExcel`"
              :on-preview="handlePreview"
              :on-remove="handleRarRemove"
              :on-success="rarHandleSuccess"
              :on-error="rarHandleError"
              :file-list="rarFile"
              :before-upload="beforeRarUpload"
              drag
            >
              <div style="margin-top:35px;">
                <img src="../../icon标/组 40.png" alt="" />
              </div>
              <div class="el-upload__text" style="color:rgba(153, 153, 153, 1)">
                点击或将文件拖拽这里上传，仅限xls/xlsx文件
              </div>
              <div class="el-upload__tip" slot="tip"></div>
            </el-upload>
          </div>

          <div style="display:flex;margin-top:40px;float: left;">
            <div style="margin-right:20px;margin-left:45px;">
              上传压缩文件：
            </div>
            <el-upload
              class="upload-demo upload-input"
              ref="rar"
              :limit="1"
              show-file-list
              :action="url+`uploadExcel`"
              :on-preview="handlePreview"
              :on-remove="handleRarRemove"
              :on-success="rarHandleSuccess"
              :on-error="rarHandleError"
              :file-list="rarFile"
              :before-upload="beforeRarUpload"
              drag
            >
              <div style="margin-top:35px;">
                <img src="../../icon标/组 41.png" alt="" />
              </div>
              <div class="el-upload__text" style="color:rgba(153, 153, 153, 1)">
                点击或将文件拖拽这里上传，仅限rar/zip/7z文件
              </div>
              <div class="el-upload__tip" slot="tip"></div>
            </el-upload>
          </div>

          <div style="text-align:center;margin-top:350px;margin-bottom:70px;">
            <el-button
              type="primary"
              @click="uploadFormSubmit"
              style="width: 140px !important;
                     height: 40px !important;"
              >&nbsp;&nbsp;提 &nbsp;交&nbsp;&nbsp;</el-button
            >
          </div>
        </el-tab-pane>
      </el-tabs>
      <!--      底部区域-->
      <!-- <div style="float:right;margin:50px 50px 50px;">
        <el-button
          v-if="compoundSelection !== 0"
          type="primary"
          plain
          @click="uploadFormSubmit"
          >&nbsp;&nbsp;提 &nbsp;交&nbsp;&nbsp;</el-button
        >
      </div> -->
    </el-card>
  </div>
</template>

<script>
export default {
  name: "UploadCompound",
  data() {
    return {
      compoundSelection: 0,
      uploadForm: {
        excelUrl: "",
        zipUrl: ""
      },
      excelFile: [],
      rarFile: [],
      url: this.now_url.now_url
    };
  },
  methods: {
    beforeExcelUpload(file) {
      //  console.log(file);
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      const isXls = fileType === ".xls";
      const isXlsx = fileType === ".xlsx";

      if (!isXls && !isXlsx) {
        this.$message.error("上传文件只能是 xls/xlsx 格式!");
      }
      return isXls || isXlsx;
    },
    beforeRarUpload(file) {
      //  console.log(file);
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      const isRar = fileType === ".rar";
      const isZip = fileType === ".zip";
      const is7z = fileType === ".7z";
      //rar zip 7z
      //  console.log(fileType)
      //  console.log(isRar)
      //  console.log(isZip)
      //  console.log(is7z)
      if (!isRar && !isZip && !is7z) {
        this.$message.error("上传文件只能是 rar/zip/7z 格式!");
      }
      //  console.log(isRar && isZip && is7z)
      return isRar || isZip || is7z;
    },
    handleExcelRemove(file, fileList) {
      //删除之后 清空url
      this.uploadForm.excelUrl = "";
      // this.$message("文件已删除")
    },
    handleRarRemove(file, fileList) {
      //删除之后 清空url
      this.uploadForm.zipUrl = "";
    },
    handlePreview(file) {
      //  console.log(file);
    },
    excelHandleSuccess(res, file) {
      //提交成功后 add和edit都暂时为这个数据
      //  console.log(res);
      if (res.code === 200) {
        this.uploadForm.excelUrl = res.msg;
        this.$message.success("excel文件提交成功！");
      } else {
        this.excelHandleError();
      }

      // 如果等于200 就成功 不然就错误别给信息
    },
    excelHandleError() {
      this.$message.error("excel文件提交失败！");
    },
    rarHandleSuccess(res, file) {
      if (res.code === 200) {
        this.uploadForm.zipUrl = res.msg;
        this.$message.success("压缩文件提交成功！");
      } else {
        this.excelHandleError();
      }
    },
    rarHandleError() {
      this.$message.error("压缩文件提交失败！");
    },
    async uploadFormSubmit() {
      //上传俩url
      //如果有url为空 直接返回（）
      //  console.log("下面是uploadForm");
      //  console.log(this.uploadForm);
      //  console.log(this.uploadForm.excelUrl);
      //  console.log(this.uploadForm.zipUrl);
      // 400 错误
      // http://121.36.58.180:8081/writeAllFile?excel=6887ae5f-c823-4302-828b-34af2bdc2274.xlsx&zip=9c6eb0ba-740e-492e-90ca-3e391201dc15.zip
      const { data: res } = await this.$axios.post(
        `writeAllFile?excel=${this.uploadForm.excelUrl}&zip=${this.uploadForm.zipUrl}`
        // {
        //   params: {
        //     excel: this.uploadForm.excelUrl,
        //     zip: this.uploadForm.zipUrl
        //   }
        // }
      );
      //  console.log(res);

      if (res.code !== 200) {
        return this.$message.error("上传失败！");
      }
      //上传成功
      this.$message.success("化合物数据提交成功！");
    }
  }
};
</script>

<style scope>
.molecular-Compose {
  margin-top: 30px;
}
.manager-alla {
  margin-top: 6px;
  display: flex;
  height: 30px;
  /* width: 130px; */
  /* justify-content: center; */
  margin-bottom: 30px;
  margin-left: 6.2px;
}
.project-managera {
  width: 4px;
  height: 30px;
  background: #4087fc;
}
.project-itema {
  /* width: 200px; */
  height: 18px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 600px;
  color: #333333;
  margin-left: 10px;
  line-height: 30px;
}
/* .el-upload-dragger {
    width: 300px;
    height: 150px;
} */
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  border-top: 3px solid #4087fc;
}
.el-tabs__item {
  color: #000 !important;
  font-weight: 400;
}
.el-tabs__nav-scroll {
  height: 50px;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  height: 50px;
  line-height: 50px;
  width: 150px;
  text-align: center;
}

</style>
